<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script>
    // 1. 创建ajax对象  -------------打开浏览器
    var xhr = null;
    try {
      xhr = new XMLHttpRequest()//高版本浏览器的ajax对象
    } catch (err) {
      xhr = new ActiveXObject("Microsoft.XML")//IE低版本浏览器创建的ajax对象
    }
    // 2调用open方法  ---------------输入了网址
    //参数1   method请求方式   get 和post 
    //参数2  url 接口地址  //http:128.123.12.12:8080/users/list
    // 参数3 async 是否异步 true 异步  false  同步
    // 同步 （按顺序执行） 会阻塞后面的代码执行
    // 异步  (同时执行) 不会阻塞后面的代码执行
    xhr.open("get", "./list.json", true)

    // 3 调用send方法 ---------------按下回车
    xhr.send()
    // 4.监控返回数据---------------返回页面
    // onreadystatechange 监控ajax的准备事件
    xhr.onreadystatechange = function () {
      // xhr.status  服务器状态码
      // 200 服务器返回数据成功
      //xhr.readyState 请求状态
      // 4 后端可以正常返回全部数据 
      if (xhr.status == 200 && xhr.readyState == 4) {
        //  返回的数据response响应
        // xhr.responseXML---后端返回xml 类型的数据
        //xhr.responseText --后端返回文本类型的数据
        console.log(xhr.responseText)
        console.log(JSON.parse(xhr.responseText))
        var arr = JSON.parse(xhr.responseText);

      }
    }
  </script>
</body>

</html>